import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; // 导入 useHistory
import '../BigDate/DepartmentAnalysisBigData.css';
//导入axios
import axios from 'axios';
//引入echarts
import DAOne from './DA_Echarts/DA_One';
import DATwo from './DA_Echarts/DA_Two';
import DAThree from './DA_Echarts/DA_Three';
import DAFour from './DA_Echarts/DA_four';
import DAFive from './DA_Echarts/DA_five';

export default function DepartmentAnalysisBigData() {
    const [activeTab, setActiveTab] = useState(1); // 默认激活第一个选项卡
    const navigate = useNavigate(); // 使用 useHistory 钩子
    //const [dataOne, setDateOne] = useState([]);//获取床位一览
    const [dataTwo] = useState([
        { id: '01', name: 'iCU患者收治率', number: '402' },
        { id: '02', name: 'crbs发病率', number: '398' },
        { id: '03', name: '患者标化病死指数', number: '372' },
        { id: '04', name: '感染性休克治疗', number: '301' },
        { id: '05', name: '静脉曲张治疗', number: '252' },
        { id: '06', name: '血栓扩张治疗', number: '201' },
        { id: '07', name: 'iCU转入治疗', number: '163' },
    ]);

    const [dataThree] = useState([
        { id: '01', index: '1-01', name: '匿名好', Medic: '徐志摩', diagnosis: '肾结石' },
        { id: '02', index: '1-02', name: '张海伦', Medic: '张学森', diagnosis: '胆结石' },
        { id: '03', index: '1-03', name: '蔡徐坤', Medic: '律师函', diagnosis: '鸡瘟' },
        { id: '04', index: '1-04', name: '不动游星', Medic: '鬼柳京介', diagnosis: '全身骨折' },
        { id: '05', index: '1-05', name: '王杰克', Medic: '我噶塔玛希', diagnosis: '全身骨折' },
        { id: '06', index: '1-06', name: '黑曼巴', Medic: '孙泰赫', diagnosis: '重度摔伤' },
        { id: '07', index: '1-07', name: 'Van♂dark', Medic: '胡杨', diagnosis: '感冒' },
    ])

    const [dataFour] = useState([
        { id: '01', name: '紫外线灯管检测', Medic: 'B级', diagnosis: '4分' },
        { id: '02', name: '呼吸机相关肺部感染', Medic: 'B级', diagnosis: '6分' },
        { id: '03', name: '导管相关感染', Medic: 'B级', diagnosis: '9分' },
        { id: '04', name: '抗菌药物标本', Medic: 'B级', diagnosis: '10分' },
        { id: '05', name: '多种耐药性感染', Medic: 'B级', diagnosis: '6分' },
        { id: '06', name: '呼吸灭菌类感染', Medic: 'B级', diagnosis: '4分' },
        { id: '07', name: '废物医疗品', Medic: 'B级', diagnosis: '3分' },
    ])

    const handleTabClick = (index) => {
        setActiveTab(index);
        if (index === 4) { // 如果点击的是财务分析
            console.log(index);
            navigate('/fa');
        } else if (index === 5) {
            navigate('/hospitalComplex/departmentAnalysis');
        }
    };

    useEffect(() => {
        const fetchData = async () => {
            try {
                //获取床位一览
                //const responseOne = await axios.get('http://8.148.7.123:8000/bedtable/list?page=1&size=100&bednumber=1');
                //setDateOne(responseOne.data); // 将API响应数据存储到state中
                //console.log(responseOne.data);
                //
            } catch (error) {
                console.error('Error fetching data: ', error);
            }
        };
        fetchData();
    }, []); // 空依赖数组确保仅在组件加载时运行

    return (
        // 头部
        <div className="DA_body">
            <div className="body_top">
                <div className="body_top_word_one">
                    东软医院医疗卫生大数据平台
                </div>
                <div className="body_top_word_two"></div>
                {/* 头部导航栏 */}
                <div className="body_top_word_three">
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(0)}>
                        <div className={`three_son_d1 ${activeTab === 0 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 0 ? 'first' : ''}`}>综合分析</div>
                        <div className={`three_son_d3 ${activeTab === 0 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(1)}>
                        <div className={`three_son_d1 ${activeTab === 1 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 1 ? 'first' : ''}`}>科室分析</div>
                        <div className={`three_son_d3 ${activeTab === 1 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(2)}>
                        <div className={`three_son_d1 ${activeTab === 2 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 2 ? 'first' : ''}`}>门诊分析</div>
                        <div className={`three_son_d3 ${activeTab === 2 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(3)}>
                        <div className={`three_son_d1 ${activeTab === 3 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 3 ? 'first' : ''}`}>住院动态分析</div>
                        <div className={`three_son_d3 ${activeTab === 3 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(4)}>
                        <div className={`three_son_d1 ${activeTab === 4 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 4 ? 'first' : ''}`}>财务分析</div>
                        <div className={`three_son_d3 ${activeTab === 4 ? 'yes' : 'no'}`}></div>
                    </div>
                    <div className='body_top_word_three_son' onClick={() => handleTabClick(5)}>
                        <div className={`three_son_d1 ${activeTab === 5 ? 'yes' : 'no'}`}></div>
                        <div className={`three_son_d2 ${activeTab === 5 ? 'first' : ''}`}>返回后台系统</div>
                        <div className={`three_son_d3 ${activeTab === 5 ? 'yes' : 'no'}`}></div>
                    </div>
                </div>
            </div>
            {/* 身体内容 */}
            <div className="body_body">
                {/* 区块1 */}
                <div className='body_body_box body_body_box_one'>
                    <div className='body_body_box_header'>
                        <div className='header_word'>病情分析</div>
                    </div>
                    <div className='body_body_box_main body_body_box_one_main'>
                        <div className='body_body_box_one_main_top'>
                            <div className='body_body_box_one_main_top_left'>
                                <div className='body_body_box_one_main_top_left_img_one'></div>
                                <div className='body_body_box_one_main_top_left_img_two'></div>
                                <div className='body_body_box_one_main_top_left_img_three'></div>
                            </div>
                            <DATwo></DATwo>
                        </div>
                        <div className='body_body_box_one_main_bottom'>
                            <DAOne></DAOne>
                        </div>
                    </div>
                </div>
                {/* 区块2 */}
                <div className='body_body_box body_body_box_two'>
                    <div className='body_body_box_header'>
                        <div className='header_word'>住院情况</div>
                    </div>
                    <div className='body_body_box_main body_body_box_two_main'>
                        <div className='body_body_box_two_main_top'>
                            <div className='body_body_box_two_main_top_left'></div>
                            <div className='body_body_box_two_main_top_right'></div>
                        </div>
                        <div className='body_body_box_two_main_bottom'>
                            <div className='body_body_box_two_main_bottom_left'>
                                <DAThree></DAThree>
                            </div>
                            <div className='body_body_box_two_main_bottom_right'>
                                <DAFour></DAFour>
                            </div>
                        </div>
                        <div className='body_body_box_two_main_bottom_bottom'>
                            <div className='body_body_box_two_main_bottom_bottom_boxOne'></div>
                            <div className='body_body_box_two_main_bottom_bottom_boxTwo'></div>
                        </div>
                    </div>
                </div>
                {/* 区块3 */}
                <div className='body_body_box body_body_box_three'>
                    <div className='body_body_box_header'>
                        <div className='header_word_two'>就医人群统计</div>
                    </div>
                    <div className='body_body_box_main body_body_box_three_main'>
                        <DAFive></DAFive>
                    </div>
                </div>
                {/* 区块4 */}
                <div className='body_body_box body_body_box_four'>
                    <div className='body_body_box_header'>
                        <div className='header_word'>手术量排名</div>
                    </div>
                    <div className='body_body_box_main body_body_box_four_main'>
                        <div className='body_body_box_four_main_box'>
                            <div className="body_body_box_four_main_box_header">
                                <div className="body_body_box_four_main_box_header_titleOne">
                                    <div className='right_t'></div>
                                    <div>序号</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleTwo">
                                    <div className='right_t'></div>
                                    <div>名称</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleThree">
                                    <div className='right_t'></div>
                                    <div>数量</div>
                                </div>
                            </div>
                            <div className="body_body_box_four_main_box_body">
                                {dataTwo.map(item =>
                                    <div className={`body_body_box_four_main_box_body_box ${item.id % 2 === 0 ? 'even' : 'odd'}`} key={item.id}>
                                        <div className="body_body_box_four_main_box_body_titleOne">
                                            <div>{item.id}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleTwo">
                                            <div>{item.name}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleThree">
                                            <div>{item.number}</div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
                {/* 区块5 */}
                <div className='body_body_box body_body_box_four'>
                    <div className='body_body_box_header'>
                        <div className='header_word_two'>科室床位一览表</div>
                    </div>
                    <div className='body_body_box_main body_body_box_five_main'>
                        <div className='body_body_box_four_main_box'>
                            <div className="body_body_box_four_main_box_header">
                                <div className="body_body_box_four_main_box_header_titleOne">
                                    <div className='right_t'></div>
                                    <div>床位</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleTwo">
                                    <div className='right_t'></div>
                                    <div>姓名</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleThree">
                                    <div className='right_t'></div>
                                    <div>责任医生</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleFour">
                                    <div className='right_t'></div>
                                    <div>诊断</div>
                                </div>
                            </div>
                            <div className="body_body_box_four_main_box_body">
                                {dataThree.map(item =>
                                    <div className={`body_body_box_four_main_box_body_box ${item.id % 2 === 0 ? 'even' : 'odd'}`} key={item.id}>
                                        <div className="body_body_box_four_main_box_body_titleOne">
                                            <div className='titleOne_round'>
                                                <div className='titleOne_round_in'></div>
                                            </div>
                                            <div className='titleOne_word'>{item.index}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleTwo">
                                            <div>{item.name}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleThree">
                                            <div>{item.Medic}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleFour">
                                            <div>{item.diagnosis}</div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
                {/* 区块6 */}
                <div className='body_body_box body_body_box_four'>
                    <div className='body_body_box_header'>
                        <div className='header_word'>风险统计</div>
                    </div>
                    <div className='body_body_box_main body_body_box_six_main'>
                        <div className='body_body_box_four_main_box'>
                            <div className="body_body_box_four_main_box_header">
                                <div className="body_body_box_four_main_box_header_titleOne">
                                    <div className='right_t'></div>
                                    <div>序号</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleTwo">
                                    <div className='right_t'></div>
                                    <div>风险事件</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleThree">
                                    <div className='right_t'></div>
                                    <div>等级</div>
                                </div>
                                <div className="body_body_box_four_main_box_header_titleFour">
                                    <div className='right_t'></div>
                                    <div>评分</div>
                                </div>
                            </div>
                            <div className="body_body_box_four_main_box_body">
                                {dataFour.map(item =>
                                    <div className={`body_body_box_four_main_box_body_box ${item.id % 2 === 0 ? 'even' : 'odd'}`} key={item.id}>
                                        <div className="body_body_box_four_main_box_body_titleOne">
                                            <div>{item.id}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleTwo">
                                            <div>{item.name}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleThree">
                                            <div>{item.Medic}</div>
                                        </div>
                                        <div className="body_body_box_four_main_box_body_titleFour">
                                            <div>{item.diagnosis}</div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}